import { useMemo } from "react";
import { useEffect } from "react"

const MyUseMemo = ({ age, name, children }) => {
  useEffect(() => {
    console.log('MyUseMemo组件被执行了渲染');
  })

  const changeAge = () => {
    console.log("----age:", age);
    return age;
  }
  const changeName = () => {
    console.log("----name:", name);
    return name + '帅哥';
  }
  // 当通过依赖项触发回调函数时，重新调用回调函数，并缓存回调函数的返回值。
  // 当props,state改变时，但是改变的不是依赖项，组件会重新渲染，不会调用useMemo()里面的函数，
  // 但是由于useMemo()的依赖项没有改变，所以，就直接返回上次缓存的值给changeUseMemoFn变量。
  // 只有当依赖改变时，才会重新调用useMemo()里面的函数。重新返回并缓存新的值。

  const changeUseMemoFn = useMemo(() => {
    // useMemo执行----一般是比较复杂的逻辑， 如果依赖不变，就不会每次都还有执行这个逻辑的开销
    console.log("changeUseMemoFn被执行了");
    return changeName()
  }, [name])
  return (
    <>
      <div style={{ border: '1px solid red' }}>
        {children}
        <p>age: {age}</p>
        <p>name: {name}</p>

        <button>age = {changeAge()}</button>
        {/* <button>name = {changeName()}</button> */}
        <button>name = {changeUseMemoFn}</button>

      </div>
    </>
  )
}
export default MyUseMemo